<template>
  <div>
    <a-modal
      :width="'80vw'"
      title="需求明细"
      :visible="detailDate.visible"
      :confirm-loading="false"
      @ok="detailDate.visible = false"
      @cancel="detailDate.visible = false"
    >
      <div class="titlewrap">
        <div>
          <span style="color: #000">物料编号</span>：</span>
          <span>{{ detailDate.goodsCode }}</span>
        </div>
        <div style="margin:0 20px">
          <span style="color: #000">物料名称：</span>
          <span>{{ detailDate.goodsName }}</span>
        </div>
      </div>
      <h4 style="margin: 20px 0">明细信息如下：</h4>
      <a-table
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
      >
         <span
          slot="useDate"
          slot-scope="text, record"
          :style="{
            color: compareDate(text, moment(new Date()).format('YYYY-MM-DD HH:mm')) ? '#222' : '#F25643',
          }"
        >
          {{ text || '-' }}
        </span>
      <span slot="actions" slot-scope="text, record">
            <a @click="toDetail(record)">详情</a>
          </span>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
import { getAction } from '@/api/manage'
import { compareDate } from '@/utils/util'
import moment from 'moment'
export default {
  data() {
    return {
      moment,
      compareDate,
      detailDate: { visible: false },
      columns: [
        {
          title: '生产订单',
          align: 'center',
          dataIndex: 'code',
        },
        {
          title: '生产商品',
          align: 'center',
          dataIndex: 'goodsName',
        },
        {
          title: '计划生产数量',
          align: 'center',
          dataIndex: 'planProductNumUnitText',
        },
        {
          title: '物料需求数量',
          align: 'center',
          dataIndex: 'totalNumText',
        },
        {
          title: '使用时间',
          align: 'center',
          dataIndex: 'useDate',
          scopedSlots: { customRender: 'useDate' },
        },
        {
          title: '所属合同',
          align: 'center',
          dataIndex: 'contractName',
          customRender: (text, record, index) => {
            console.log(text, record, index)
            return `${record.contractName}｜${record.contractCode}`
          },
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'actions',
          scopedSlots: { customRender: 'actions' },
        },
      ],
      dataSource: [],
    }
  },
  components: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getList(v) {
      if (v) {
        this.detailDate = v
      }
      console.log(v)
      getAction(`/planmgt/erpProductMaterialRequirement/infoList`, { goodsId: v.goodsId }).then((res) => {
        console.log(res, 'detList')
        if (res.code === 200) {
          this.dataSource = res.result
        }
      })
    },
    toDetail(e) {
      console.log(e, '去详情')
      this.$openWay(this, true, `/workshopDemandDetail?id=${e.id}`)
    },
  },
}
</script>
<style  scoped>
.titlewrap {
  display: flex;
  justify-content: start;
}
</style>

